Page Structure and Design

Elements of a Page

Detailed instructions in the WCMS Wiki on Bayerncollab/Confluence (access-restricted).

A page consists of various basic elements.

The stage (also called “header” or “header area”)

The stage contains central elements such as the logo and the name of the institution. These elements are defined at the beginning. It includes important navigation components such as the hamburger menu, breadcrumb navigation and quick links / deep links. On desktop screens, a language switch option is also visible.

On detail and overview pages, the stage includes a precise heading and a text that summarizes and/or introduces the page content.

A stage image is mandatory on overview pages and optional on all other page types.
A stage image is only used on detail pages if it provides editorial added value.
For pages generated from data sources (person profiles, news or event pages), the stage is created automatically.

Footer

The footer contains contact information for your institution, social media channels, and can, if necessary, be adapted by your project administration or central support. In addition, legally relevant information on privacy, accessibility, and imprint (legal notice) is included.

Navigation Component

Navigation helps your users find their way around your website, stay well-oriented, and quickly access the topics relevant to them. A good navigation structure improves accessibility as well as findability and ranking in search engines.

Challenge:

If you create too many pages with menu items on a single level, there is a risk that the menu will appear overloaded and not all items will be relevant to the target audience. “If everything is important, nothing is important.”
If the structure is not intuitive for your target audience, relevant content will either not be found or only via long click paths. Users quickly feel lost on the website.

Recommendations:

Follow your concept and sitemap: Base the navigation structure on your overall concept and sitemap.
Grouping topics: Combine logically related topics under one menu item. Rule of thumb: Try not to list more than 4–7 menu items in the top navigation levels.
Prioritisation: Place important topics for your target audience higher in the navigation hierarchy.
Show information progressively: Don’t put everything at the top level; guide your users step by step to the topic. Use broad categories on top levels and more detailed subcategories below to avoid overwhelming users.
Consistent structure in sub-areas: Use a consistent layout (e.g., the same substructure for all degree programs or all research projects that are comparable).
Pages with menu items: Create menu items for all central, permanent content → main categories, important service pages that should always be findable by all user groups.
Pages without menu items: Only accessible via direct links and harder for search engines to find. Ideal for pages that should only be reachable via specific paths (e.g., forms, special detailed information).
Terminology: Use short terms that are understandable to the target audience and name them consistently.

Hamburger Navigation

The hamburger navigation is the main navigation, present consistently across all pages of your web presence.

You can choose which individual pages should be displayed as menu items and which pages should only be accessible via direct links.
For multilingual sites the menu also includes a link to the second language; on mobile devices, this link is the only way to navigate to that second language.
A parent institution or overarching unit is always specified.

Breadcrumb Navigation

On the top left you find the so-called “breadcrumb” navigation, which shows where in the subsection of the site you currently are and allows you to jump up one or more levels.

Only pages that have a “menu item” are displayed here.

Horizontal Navigation Items – Quicklinks/Deep Links

Directly next to the hamburger navigation are three horizontal navigation items that serve as quick access points to the most important subpages of your site. Like the hamburger menu, these quicklinks are displayed on all pages. They are usually determined during the go live phase but can also be adjusted later by the project administration or central support.

Anchor Links (Optional)

Anchor links can be enabled for a page. They are generated automatically and create a table of contents of the main headings on a page. They allow users to jump quickly to individual topics.

Especially on pages with a lot of content, anchor links should always be enabled.
Anchor links can be used either as simple jump links that point to the headings of content modules, or as a table of contents that provides a more detailed listing of heading hierarchies within standard content.
Anchor links can be activated on all page types!

Language switching

If your website is multilingual , users have two options for switching between languages:

Switching via hamburger navigation: At the end of the hamburger navigation, there is an extra menu item that allows you to switch to the second language. This option works on all devices.
Switching via horizontal navigation: On desktop devices, a language switch is also displayed at the top right of the horizontal navigation bar. Note: If you minimize the browser window on a desktop device, this option will disappear. However, you can always use the language switch via the hamburger navigation.

Which page types are available?

At LMU, FirstSpirit offers different page types with specialized properties and corresponding modules for layout. For each page type, there are specialized paragraph modules that allow you to design your website and content appropriately. Some paragraph modules (due to their features) can be used only on specific page types, while others are available across all page types.

Overview pages for introducing detail pages
Detail pages for presenting in-depth content and summaries
Pages from data sources such as personal contact pages, news, and event pages

Example overview page

Overview Pages

They make up approximately 10% of a web presence. An overview page is a search-engine-optimized entry page designed to announce a broad topic area and guide visitors to various subtopics using multiple teaser modules. Rather than providing information, it aims to spark interest in a given subject and serves a promotional purpose. For this reason, overview pages are highly image-focused and rely on emotional impact.

Text Display
Overview pages are not intended for detailed explanations or complex content. For introductory and brief explanatory text, overview pages offer a two-column text module.

Example detail page

Detail pages

Approximately 90 % of all pages on a web presence typically consist of detail pages. The detail page (also known as the “content page”) is the standard page type. Its purpose is the clear and structured presentation of information, facts, and complex content for the various target groups of LMU. As the name suggests, detail pages go into detail. They are less image-heavy than overview pages. To structure complex and text-heavy content clearly and make it easily accessible to LMU’s target audiences, detail pages primarily provide text modules.

Special pages: persons, news, and events

Contact person pages as well as news and event pages can become so‑called “data sources.” These are created once by editors in the system and can then be integrated and displayed at many locations.

You do not need to create separate pages for persons, news, or events yourself - you only enter the data in the data source editor. FirstSpirit then automatically generates the specific page when it is accessed.

Person profile page

On person profile pages, all details about an individual are listed. In addition to standard contact information, a variety of modules familiar from other page types can be integrated—such as for displaying the CV, assistance team, or publications in an illustrative manner.

Example of a person contact page

News page

On news pages, developments are presented in detail. In addition to the standard fields, you can also use additional modules for elaborate presentation of the news, such as embedding an image slider or video.

Example of a news page

Event page

Event pages display events in detail. In addition to the standard fields, you can also integrate other modules such as an Anny booking form.

Example of an event page